<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="number" id="ipt" value="">
<div class="box"></div>
<button id="btnpre">上一页</button>
<button id="btn">下一页</button>
</body>
<script src="../lib/jquery/jquery.js"></script>
<script>

    var map=new Map();
    map.set('hello',222);
    map.set('hehe',2223);
    console.log(map.get('hello'));

    //双向绑定实现翻页功能

    var data1 = {
        currentPage: 1
    };

    getList();
    function getList() {
        $.post('http://139.196.113.202/huoban-sales//http/sales/function/community/findSuggesList.do', data1, function (res) {
            console.log(res);
            $('.box').empty();
            res.data.list.forEach(function (item, idnex) {
                var html = '';
                html = '<p>' + item.name + '</p>';
                $('.box').append(html)
            })
            function publishd(data,res) {
                console.info(data);
                Object.keys(data).forEach(function (key) {
                    sublished(data,key,data[key],res)
                })
            }
            function sublished(data,key,val,res) {
                Object.defineProperty(data,key,{
                    configurable: true,
                    enumerable: true,
                    get:function () {
                        console.log("visit");
                        $('#ipt').val(val);
                        return val
                    },
                    set:function (newval) {
                        console.log("set");
                        if (val==newval) return;
                        if(newval<1||newval>res.data.totalPage){
                            alert("已经到第一页");
                            return;
                        }else {
                            val=newval;
                        }
                        getList()
                    }
                })
            }
            publishd(data1,res);

        })
    }





    $('#ipt').on('keyup',function () {
        data1.currentPage=$(this).val()
    });




    $('#btn').click(function () {
        data1.currentPage++;
    });
    $('#btnpre').click(function () {
        data1.currentPage--;
    });

//
//    Object.defineProperty(data1, 'currentPage', {
//        configurable: true,
//        enumerable: true,
//        get: function () {
//            return data1['currentPage']
//        },
//        set: function (newval) {
//            data1['currentPage'] = newval;
//        }
//    });


    var data = {name: 'kindeng'};
    observe(data);
    data.name = 'dmq'; //哈哈哈，监听到值变化了 kindeng --> dmq


    function observe(data) {
        if (!data || typeof data !== 'object') {
            return;
        }
        // 取出所有属性遍历
        Object.keys(data).forEach(function (key) {
            defineReactive(data, key, data[key]);
        });
    }


    function defineReactive(data, key, val) {
        observe(val); // 监听子属性
        Object.defineProperty(data, key, {
            enumerable: true, //可枚举
            configurable: false, //不能再define
            get: function () {
                //console.log('ddd');
                return val;
            },
            set: function (newVal) {
                //console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal);
                val = newVal;
            }
        });
    }

    //observe

    var person={
        name:'colin'
    }
     //observed(person);
    //person.name='haha';
    //person.name

    function observed(data) {
        if (!data || typeof data !== 'object') {
            return;
        }
        Object.keys(data).forEach(function (key) {
            defineReact(data,key,data[key])
        })
    }


    function defineReact(data,key,val) {
        observed(val);
        Object.defineProperty(data,key,{
            enumerable: true, //可枚举
            configurable: false, //不能再define
            get:function () {
                console.log("visit:"+key);
                return val
            },
            set:function (newval) {
                console.log("set:"+key+"->"+newval);
                 val=newval;
            }
        })
    }

//    console.log(person.name)
//    console.log(person.name="haha")


    function MVVM(option) {
        this.option=option;
        this.data=this._data=this.option.data||{};
        this.observe(this.data);
    }

    MVVM.prototype={
        _proxy:function (data,key,val) {
            Object.defineProperty(data,key,{
                enumerable: true, //可枚举
                configurable: false, //不能再define
                get:function () {
                    console.log("visit:"+key);
                    return val
                },
                set:function (newval) {
                    console.log("set:"+key+"->"+newval);
                    val=newval;
                }
            })
        },
        observe:function (data) {
            var self=this;
            Object.keys(data).forEach(function (key) {
                self._proxy(self.data,key,self.data[key])
            });
        }

    };


    var vm=new MVVM({data:{name:'ccc'}});
    console.log(vm.data.name);

//订阅发布模式


    var Publish={};
        Publish.stack=[];

    //增加订阅者

    Publish.pub=function (key,fn) {
        if(!this.stack[key]){
            this.stack[key]=[]
        }
        this.stack.push(fn)
    };

    //发布消息
    Publish.sub=function () {
        var key = Array.prototype.shift.call(arguments); // 取出消息类型名称

        var fns = this.stack[key];  // 取出该消息对应的回调函数的集合

        // 如果没有订阅过该消息的话，则返回
        if(!fns || fns.length === 0) {
            return;
        }
        for(var i = 0,fn; fn = fns[i++]; ) {
            fn.apply(this,arguments); // arguments 是发布消息时附送的参数
        }
    };
    Publish.pub('red',function (size) {
        console.log("尺寸是："+size);
    });
    Publish.pub('block',function (size) {
        console.log("再次尺寸是："+size);
    });
    Publish.sub("red",12);



</script>
</html>